<!-- quiButton -->
<template>
  <div id="pageQuiButton">
    <!--使用-->
    <qui-btn msg="测试点击" class="small" @parentClickEvent="login" :isShow="false"
      ><!--:是为了绑定动态值true,false-->
      <img slot="icon" class="ico" src="../assets/logo.png" alt="" />
      <span slot="title" class="dot">-</span>
    </qui-btn>
    <qui-btn v-on:parentClickEvent="doSth" msg="我可以点击">
      <img
        slot="icon"
        class="ico"
        src="http://qzonestyle.gtimg.cn/aoi/sola/20170214175951_TA6qW1X7ob.png"
        alt=""
      />
    </qui-btn>
    <qui-btn v-on:parentClickEvent="doSth1" msg="确定" :isShow="false"></qui-btn>
    <qui-btn v-on:parentClickEvent="doSth2" msg="取消"></qui-btn>
    <div class="page-enter">
      <qui-btn v-on:parentClickEvent="goToHello" msg="hello"></qui-btn>
      <qui-btn v-on:parentClickEvent="goToPage" msg="page"></qui-btn>
      <qui-btn v-on:parentClickEvent="showList" msg="显示quiNav"></qui-btn>
      <qui-btn v-on:parentClickEvent="model" msg="model"></qui-btn>
    </div>
    <!-- keep-alive 将标签内的数据做一个缓存，不改变里面的数据data状态；
    每次改变时并不是创建和销毁，而是改变激活状态deactived和actived；
    多用于导航切换时，导航目录下浏览内容位置的缓存保护 -->
    <keep-alive><qui-nav v-if="isShow"></qui-nav> </keep-alive>
    <qui-nav v-if="isShow"></qui-nav>
  </div>
</template>

<script>
import quiBtn from "../components/qui/QuiButton";
import quiNav from "../components/qui/quiNav";
export default {
  name: "pageQuiButton",
  data: function() {
    return {
      isShow: false
    };
  },
  components: {
    "qui-btn": quiBtn,
    "qui-nav": quiNav
  },
  methods: {
    doSth: function() {
      alert("111");
    },
    doSth1: function() {
      alert("true");
    },
    doSth2: function() {
      alert("false");
    },
    login: function() {
      this.$router.push("/login");
      //   self.location="#/login"
    },
    goToHello: function() {
      this.$router.push("/hello");
      //   self.location = "#/hello";
    },
    goToPage: function() {
      this.$router.push("/blog");
      //   self.location = "#/blog";
    },
    showList: function() {
      this.isShow = !this.isShow;
    },
    model(){
        this.$router.push("/model")
    }
  }
};
</script>
<style scoped>
@import "./css/reset.import.css";
@import "./css/qui-btn.import.css";
.small {
  border: 1px solid #000;
  border-radius: 2px;
  padding: 3px 5px;
  /* display: flex;
  align-items: center; */
}
.ico {
  width: 14px;
  height: 14px;
  line-height: 14px;
}
.dot {
  /* background-color: red; */
  color: red;
  width: 4px;
  height: 4px;
}
.page-enter {
  margin-top: 20px;
}
</style>
